<template>
  <div class="subordinateUnit" v-loading="topLoading">
    <!-- <cus-search> </cus-search> -->
    <cus-search style="min-width: 1000px;padding-bottom: 0px;">
      <cus-search-item>
        <Form :model="form" ref="formValidate" :label-width="80" @keydown.native.enter.prevent="
    pages.page = 1;
  onInit();
  ">
          <FormItem class="mr_48 mb_20" label="食谱名称" prop="name">
            <Input v-model="form.name" style="width: 200px" placeholder="请填写食谱名称" clearable></Input>
          </FormItem>
          <FormItem class="mr_48 mb_20" label="起止日期" prop="dateString">
            <el-date-picker v-model="form.dateString" type="week" format="yyyy 第 WW 周" placeholder="选择周"
              @change="weekChange" style="width: 200px" :picker-options="{ firstDayOfWeek: 1 }">
            </el-date-picker>
          </FormItem>
          <FormItem class="mr_48 mb_20" label="审核状态" prop="auditState">
            <Select style="width: 200px" v-model="form.auditState" placeholder="全部" @on-change="
    pages.page = 1;
  onInit();
  ">
              <Option :value="-1">全部</Option>
              <Option :value="1">已审核</Option>
              <Option :value="2">待上报</Option>
              <Option :value="3">已驳回</Option>
              <Option :value="0">未审核</Option>
              <Option :value="5">待审核</Option>
              <Option :value="4">已撤销</Option>


            </Select>
          </FormItem>

          <FormItem class="mr_48 mb_20" label="食谱类型" prop="isCommonly">
            <Select style="width: 200px" v-model="form.isCommonly" placeholder="全部" @on-change="
    pages.page = 1;
  onInit();
  ">
              <Option :value="-1">全部</Option>
              <Option :value="1">常用食谱</Option>
              <Option :value="0">不常用食谱</Option>
            </Select>
          </FormItem>

          <cusButton class="mr_20 mb_20" type="primary" @onClick="
    pages.page = 1;
  onInit();
  ">查询</cusButton>
          <cusButton class="mr_20 mb_20" type="default" @onClick="resetFilter">重置</cusButton>
        </Form>
      </cus-search-item>
    </cus-search>
    <div class="contentBox mt_20">
      <Spin size="large" fix v-if="form.loading"> </Spin>
      <div class="cookBox" v-for="(item, index) in data" :key="index" :style="{ marginTop: index == 0 ? '' : '9px' }">
        <div class="cookBox-title">
          {{ item.begianTime }} — {{ item.endTime
          }}<span style="color: gray; font-size: 13px" v-if="showCheck">（点击食谱即可选中，需已审核食谱；批量生成采购需求，需选择同一周次已审核食谱）</span>
        </div>
        <div class="cookBox-itembox">
          <div class="cookBox-itembox-item bookItem" v-for="(it, idx) in item.mealPlanList" :key="idx"
            @click="selectItem(it)" :class="{
    selectItem:
      selectMealPlanIdList.length &&
      selectMealPlanIdList.includes(it.mealPlanId),
  }">
            <div class="bookItem-shenhe" v-if="it.auditState == 1"></div>
            <div class="bookItem-daishenhe" v-if="it.auditState == 5"></div>
            <div class="bookItem-backOut" v-if="it.auditState == 4"></div>
            <div class="bookItem-reject" v-if="it.auditState == 3"></div>
            <div class="bookItem-top">
              <Tooltip :content="it.name" placement="top" theme="light" max-width="250">
                <div class="bookItem-top-title" :class="{
    selectItem:
      selectMealPlanIdList.length &&
      selectMealPlanIdList.includes(it.mealPlanId),
  }">
                  {{ it.name }}
                </div>
              </Tooltip>
              <div class="bookItem-top-date">
                创建时间：{{
    it.createDate | formatTime("yyyy-MM-dd hh:mm:ss")
  }}
              </div>
              <div class="bookItem-top-line"></div>
              <div class="bookItem-top-tags">
                <Tag color="default" v-if="it.makeState == 0">草稿</Tag>
                <Tag style="margin-right: 8px" color="gold" v-if="it.makeState == 1">正式食谱</Tag>
                <Tag style="margin-right: 8px" color="gold" v-if="it.makeState == 3">当前执行食谱</Tag>
                <Tag style="margin-right: 8px" color="green" checkable @on-change="currentScreen(it)"
                  v-if="it.publishState == 1">已发布</Tag>
                <Tag style="margin-right: 8px" color="red" v-if="it.publishState == 0">未发布</Tag>
                <Tag style="margin-right: 8px" color="blue">{{
    it.makeType == 0 ? "手工生成" : "智能生成"
  }}</Tag>
              </div>
              <div class="bookItem-top-imgBox">
                <div class="bookItem-top-imgBox-tag" v-if="it.auditState == 1"
                  @click="setCommonly(it.mealPlanId, it.isCommonly)">
                  <Icon type="md-ionic" size="18" color="#FFFFFF" v-if="it.isCommonly == 1" />
                  <Icon type="ios-ionic-outline" size="18" color="#FFFFFF" v-if="it.isCommonly == 0" />
                  <span>{{
    it.isCommonly == 1 ? "取消常用食谱" : "设为常用食谱"
  }}</span>
                </div>
                <div style="width: 100%; height: 180px; margin-bottom: 10px" @click="changeImg(it)">
                  <img :src="it.mealImg" alt="" v-if="it.mealImg" />
                  <div v-else style="
                      width: 100%;
                      height: 100%;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      color: white;
                      background: gray;
                    ">
                    暂无食谱封面
                  </div>
                </div>
              </div>
              <!-- <div class="bookItem-top-priceBox">
                                预计收入：<span style="color:#F46C6C;margin-right:18px">25550</span> 成本与售价总差额：<span style="color:#F46C6C">25550</span>
                            </div> -->
            </div>
            <div class="bookItem-bottom2">
              <div style="border-right: 1px solid #dddddd" v-if="it.auditState != 5 && it.auditState != 1"
                @click.stop="null">
                <Poptip confirm transfer :title="`是否确认变更${it.makeState == 3 ? '当前正在执行食谱' : '食谱'
    }？请谨慎处理！`" width="210" @on-ok="onDetail(it, false, true)">
                  <div class="tipBox">
                    <Icon type="ios-create" color="rgba(24, 144, 255, 1)" size="16" />
                    <span style="margin-left: 3px">修改</span>
                  </div>
                </Poptip>
              </div>
              <div style="border-right: 1px solid #dddddd" @click="onDetail(it, true, false)">
                <Icon type="ios-search" color="rgba(24, 144, 255, 1)" size="18" />
                <span style="margin-left: 3px">查看</span>
              </div>
              <div style="border-right: 1px solid #dddddd" v-permission="10" v-if="$store.state.kitchenMode != 'only_kitchen' && it.auditState == 1" @click="setDishesTemplate(it)" >
                <Icon type="ios-locate" color="rgba(24, 144, 255, 1)" size="18" />
                <span style="margin-left: 3px">{{ it.isMould ? '食谱模板' : "设定为食谱模板" }}</span>
              </div>
              <div style="border-right: 1px solid #dddddd; height: 100%" v-if="getShowFlag(it)">
                <!-- <Poptip
                  confirm
                  title="请确认是否审核该食谱？"
                  width="210"
                  @on-ok="onSend(it.mealPlanId, 1, item.auditState)"
                > -->
                <div class="tipBox" @click="showDetailModal(it.mealPlanId, 1, it.auditState,1)">
                  <Icon type="ios-checkmark-circle-outline" color="rgba(24, 144, 255, 1)" size="18" />
                  <span style="margin-left: 3px">{{ getShowText(it) }}</span>
                </div>
                <!-- </Poptip> -->
              </div>

              <div v-if="getShowFlag(it)">
                <Poptip confirm title="是否确认删除该食谱？" width="200" :transfer="true" @on-ok="onDelete(it)">
                  <div class="tipBox">
                    <Icon type="ios-trash" color="red" size="18" />
                    <span style="margin-left: 3px; color: red">删除</span>
                  </div>
                </Poptip>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="
          color: gray;
          text-align: center;
          padding: 100px 0;
          font-size: 20px;
        " v-if="data.length == 0">
        暂无数据
      </div>
    </div>
    <div class="fixedBox">
      <div class="checkBox" v-if="showCheck">
        <div style="margin-right: 34px">
          <div style="margin-bottom: 5px">选择不生成采购需求的食材分类:</div>
          <div>
            <CheckboxGroup v-model="social" size="small">
              <Checkbox :label="item" v-for="item in socialList" :key="item">{{
    item
  }}</Checkbox>
            </CheckboxGroup>
          </div>
        </div>
        <Button type="primary" style="margin-right: 10px" @click="createOrderBtn()">生成采购需求</Button>
        <Button @click="
    showCheck = false;
  selectMealPlanId = '';
  ">关闭</Button>
      </div>
      <div class="buyBox" @click="showCheck = !showCheck" v-if="!showCheck">
        <div>
          <div>采购</div>
          <div>需求</div>
        </div>
      </div>
      <div class="pageBox">
        <cus-page :data="pages" style="marginTop: 0px" :showElevator="false"
          @pageChange="queryMealPlanjiuApi"></cus-page>
      </div>
    </div>
    <!-- 修改食谱封面 -->
    <changeImg ref="changeImg"></changeImg>
    <examineVerify ref="examineVerify" @onSendModal="onSendModal"></examineVerify>
  </div>
</template>
<script>
import {
  queryMealPlanjiu,
  setingMealPlan,
  auditConfirmMealPlan,
  deleteMealPlan,
  exportProductSupplyOrderExcel,
  publishProductSupplyOrder,
  selectMealPlanMaterialList,
  setPublishShow,
  verifyThisWeekStallMealIsPublish,
  verifyDish,
  reqSetDishesTemplate
} from "@/api/business/dishesModule";
import changeImg from "./components/changeImg";
import examineVerify from "./components/examineVerify.vue";
export default {
  components: {
    changeImg,
    examineVerify,
  },
  data() {
    return {
      form: {
        loading: false,
        name: "",
        dateString: "",
        isCommonly: -1,
        auditState: -1,
        begindate: "",
        enddate: "",
      },
      dateList: [], // 一周日期集合
      data: [], //Table列表数据
      tableHeight: 0, // Table表格默认高度
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      showCheck: false,
      socialList: ["粮食", "植物油", "调料"],
      social: ["植物油", "调料"],
      selectMealPlanIdList: [],
      selectFoodBookList: [],
      topLoading: true,
    };
  },
  computed: {},
  mounted() {
    window.addEventListener("resize", this.getTableHeight);
    this.getTableHeight();
    this.queryMealPlanjiuApi();
  },
  methods: {

    // 设定为食谱模板
    setDishesTemplate(data) {
      console.log(data, 333)
      this.$Modal.confirm({
        title: "提示",
        content: `<p>设为食谱模板后不可取消，是否继续</p>`,
        onOk: async () => {
          const res = await reqSetDishesTemplate({ mealPlanId: data.mealPlanId })
          if (res.retCode == 2000) {
            this.$Message.success("设为食谱模板成功.");
            this.queryMealPlanjiuApi();
          } else {
            this.$Message.console.error(); (res.retMsg);
          }
        },
      });
    },
    onSendModal(data) {
      this.onSend(data.mealPlanId, data.autoStatus, data.auditComment);
    },
    showDetailModal(mealPlanId, autoStatus, auditState,type) {
      let params = new Object();
      params = { mealPlanId, autoStatus, auditState };
      this.$refs["examineVerify"].show(params);
    },
    getShowFlag(it) {
      console.log(it);
      let showFlagList = [0, 2, 3, 4];
      if (showFlagList.includes(it.auditState)) {
        return true;
      } else {
        return false;
      }
    },
    getShowText(it) {
      let text = "";
      let value = it.auditState;
      switch (value) {
        case 0:
          text = "审核";
          break;
        case 2:
          text = "上报审核";
          break;
        case 3:
          text = "重新上报";
          break;
        case 4:
          text = "重新上报";
          break;
        default:
          text = "";
      }
      return text;
    },
    currentScreen(data) {
      let params = {};
      params.mealPlanId = data.mealPlanId;
      setPublishShow(params).then((res) => {
        if (res.retCode == 2000) {
          this.onInit();
          this.$Message.success(res.retMsg);
        }
      });
    },
    //设置Table表头高度自适应
    getTableHeight() {
      this.tableHeight = window.innerHeight - 209;
    },
    onInit() {
      this.queryMealPlanjiuApi();
    },
    // 删除食谱 - 接口
    onDelete({ mealPlanId }) {
      deleteMealPlan({
        mealPlanId,
      }).then((res) => {
        if (res.retCode == 2000) {
          this.$Message.success("食谱删除成功.");
          this.queryMealPlanjiuApi();
          resolve();
        }
      });
    },
    // 审核食谱选项
    onSend(mealPlanId, type, auditRemark) {
      if (type == 0) {
        // this.$Modal.confirm({
        //     title: '取消审核',
        //     content: '<p>是否取消审核该食谱？</p>',
        //     onOk: () => {
        //         this.auditConfirmMealPlanApi(mealPlanId, type);
        //     }
        // });
      } else {
        this.verifyThisWeekStallMealIsPublish(mealPlanId, type, auditRemark);
      }
    },
    verifyThisWeekStallMealIsPublish(mealPlanId, type, auditRemark) {
      let params = {};
      params.mealPlanId = mealPlanId;
      verifyThisWeekStallMealIsPublish(params).then((res) => {
        if (res.retCode == 2000) {
          this.auditConfirmMealPlanApi(mealPlanId, type, 0, auditRemark);
        } else if (res.retCode == 2888) {
          this.$Modal.confirm({
            title: "提示",
            content: `<p>${res.retMsg}</p>`,
            onOk: () => {
              this.auditConfirmMealPlanApi(mealPlanId, type, 1, auditRemark);
            },
          });
        }
      });
    },
    // 审核食谱 - 接口
    auditConfirmMealPlanApi(mealPlanId, type, replaceMeal, auditRemark,checkData = 0) {
      auditConfirmMealPlan({
        mealPlanId,
        replaceMeal: replaceMeal ? replaceMeal : 0,
        autoStatus: type,
        auditRemark: auditRemark,
        checkData: checkData,
      }).then((res) => {
           let content = ''
        if (res.retCode == 2000) {
          this.$Message.success(
            "提交成功"
            // type == 1 ? "食谱审核成功." : "食谱已取消审核."
          );
          this.queryMealPlanjiuApi();
        }else if (res.retCode == 2888) {
       
          if (res.data) {
            res.data.map((it) => {
              console.log(it);
              content += `<p style="margin-top:5px">${it}</p>`
            })
            setTimeout(() => {
              this.$Modal.confirm({
              title: res.retMsg,
              content: content,
              width: '600',
              okText: '继续审核',
              cancelText: '取消',
              onOk: () => {
                this.auditConfirmMealPlanApi(mealPlanId, type, replaceMeal, 1,1)
              }
            })
            },500)
           
          } else {
            setTimeout(() => {
              this.$Modal.confirm({
              title: '提示',
              content: '<p>该档口本周存在已发布食谱，是否继续发布？</p>',
              onOk: () => {
                this.auditConfirmMealPlanApi(mealPlanId, type, 1, 1,1)
              }
            })
            },500)
   
          }
        } 
      });
    },
    // 前往明细
    onDetail(row, isLook, isChange) {
      let obj = {
        meal_plan_id: row.mealPlanId,
        startDate: row.begianTime,
        stopDate: row.endTime,
        make_type: row.makeType,
        isLook,
        isChange,
      };
      this.$router.push({
        path: `/createHandmade/createHandmadeThree`,
        query: {
          form: JSON.stringify(obj),
        },
      });
    },
    resetFilter() {
      this.$refs['formValidate'].resetFields();
      console.log('触发');
      this.pages.page = 1;
      this.pages.size = 10;
      // this.form.isCommonly = null;
      // this.form.name = "";
      // this.form.auditState = null;
      // this.form.begianTime = "";
      this.form.begindate = "";
      this.form.enddate = "";
      // this.form.dateString = "";
      this.onInit();
    },
    // 获取列表接口 --接口
    queryMealPlanjiuApi() {
      this.topLoading = true;
      console.log('接口访问');
      return new Promise((resolve) => {
        let params = {
          pageno: this.pages.page,
          size: this.pages.pageSize,
          isCommonly: this.form.isCommonly == -1 ? null : this.form.isCommonly,
          name: this.form.name,
          auditState: this.form.auditState == -1 ? null : this.form.auditState,
          begindate: this.form.begindate,
          enddate: this.form.enddate,
        };
        this.form.loading = true;
        queryMealPlanjiu(params).then((res) => {
          this.topLoading = false;
          this.form.loading = false;
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    //时间week事件
    weekChange(date) {

      if (date) {
        this.getCurrentWeek(date);
      } else {
        this.form.begindate = "";
        this.form.enddate = "";
      }
      this.onInit();
    },
    // 获取本周日期组件处理
    getCurrentWeek(date) {
      let nowData = new Date(date); //传入时间参数,如 2021-11-09 获取给定日期所属的周 日期
      let currentDay = nowData.getDay();
      if (currentDay == 0) {
        currentDay = 7;
      }
      let beforweek = [],
        afterWeek = [];
      for (let i = 1; i <= 7; i++) {
        if (currentDay - i >= 0) {
          let DayTime =
            nowData.getTime() - (currentDay - i) * 24 * 60 * 60 * 1000;
          beforweek.push(new Date(DayTime).Format("yyyy-MM-dd"));
        } else {
          let DayTime = nowData.getTime() + (8 - i) * 24 * 60 * 60 * 1000;
          afterWeek.push(new Date(DayTime).Format("yyyy-MM-dd"));
        }
      }
      afterWeek = afterWeek.reverse();
      let dateList = [...beforweek, ...afterWeek];
      if (dateList.length) {
        this.form.begindate = `${dateList[0]}`;
        this.form.enddate = `${dateList[dateList.length - 1]}`;
      }
    },
    // 设置为常用食谱
    setCommonly(mealPlanId, isCommonly) {
      setingMealPlan({
        mealPlanId: mealPlanId,
        isCommonly: isCommonly == 1 ? 0 : 1,
      }).then((res) => {
        if (res.retCode == 2000) {
          this.$Message.success(
            `${isCommonly == 0 ? "设置为常用食谱" : "取消常用食谱"}成功`
          );
          this.onInit();
        }
      });
    },
    // 修改食谱封面接口
    changeImg(row) {
      this.$refs["changeImg"].show(row);
    },
    // 选中食谱
    selectItem(row) {
      if (this.showCheck) {
        // 判断是否存在
        if (row.auditState != 1) {
          this.$Message.warning("未审核食谱不能生成采购需求.");
          return;
        } else {
          let arr = this.selectMealPlanIdList.filter(
            (item) => item == row.mealPlanId
          );
          if (arr.length) {
            this.selectMealPlanIdList.map((item, index) => {
              if (item == row.mealPlanId) {
                this.selectMealPlanIdList.splice(index, 1);
                this.selectFoodBookList.splice(index, 1);
              }
            });
          } else {
            this.selectMealPlanIdList.push(row.mealPlanId);
            this.selectFoodBookList.push(row);
          }
        }
      }
    },
    // 生成采购需求单
    createOrderBtn(checkData = 0) {
      if (!this.selectMealPlanIdList.length) {
        this.$Message.warning("请选择要生成采购需求的食谱.");
        return;
      }
      console.log(checkData,123);
      
      return new Promise((resolve) => {
        this.topLoading = true;
        selectMealPlanMaterialList({
          foodClass: this.social,
          mealPlanId: this.selectMealPlanIdList,
          checkData: checkData
        }).then((res) => {
          this.topLoading = false;
          let content = ''
          if (res.retCode == 2000) {
            this.$Message.success("采购需求生成成功.");
            this.selectMealPlanIdList = [];
            this.selectFoodBookList = [];
            this.$router.push({
              path: "/view/collectingMaterials/purchaseGeneration",
            });
          }else if (res.retCode == 2888) {
            res.data.list.map((it) => {
              content += `<p style="margin-top:5px">${it}</p>`
            })
            if (res.data.checkData == 1) {
              this.$Modal.confirm({
                title: res.retMsg,
                content: content,
                width: '600',
                okText: '继续',
                cancelText: '取消',
                onOk: () => {
                  this.createOrderBtn(1)
                }
              })
            } else {
              this.$Modal.warning({
                title: res.retMsg,
                content: content,
                width: '600',
                okText: '关闭'
              })
            }
          }
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
/*里面的代码可以根据自己需求去进行更改*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 6px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.4);
}

.subordinateUnit {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.contentBox {
  flex: 1;
  // background: green;
  overflow-y: auto;
  overflow-x: hidden;
  // background: #FFFFFF;
  border-radius: 4px;
  padding-bottom: 100px;
}

.mr_48 {
  margin-right: 48px;
}

.fixedBox {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
}

.pageBox {
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 20px;
  box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.09),
    0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px -1px rgba(0, 0, 0, 0.16);
  border-radius: 4px;
}

.cookBox {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;

  &-title {
    height: 65px;
    line-height: 65px;
    padding: 0 26px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
  }

  &-itembox {
    padding: 20px 24px 0;
    display: flex;
    flex-wrap: wrap;
  }
}

.bookItem {
  width: 352px;
  background: #ffffff;
  box-shadow: 0px 1px 2px -2px rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  border: 1px solid #dddddd;
  margin: 0 30px 20px 0;
  position: relative;
  cursor: pointer;

  &-top {
    padding: 20px 20px 0 20px;
    border-bottom: 1px solid #ebebeb;

    &-title {
      height: 25px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.65);
      line-height: 25px;
      overflow: hidden;
      margin-bottom: 2px;
      border: none !important;
    }

    &-date {
      height: 17px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
      line-height: 17px;
      overflow: hidden;
      margin-bottom: 8px;
    }

    &-line {
      height: 1px;
      background: rgba(0, 0, 0, 0.06);
    }

    &-tags {
      display: flex;
      padding: 9px 0;
    }

    &-imgBox {
      height: 190px;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }

      &-tag {
        position: absolute;
        cursor: pointer;
        left: 0;
        top: 0;
        padding: 8px;
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0.62);
        border-radius: 0px 0px 2px 0px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;

        span {
          margin-left: 2px;
        }
      }
    }

    &-priceBox {
      margin-top: 8px;
      margin-bottom: 15px;
      height: 17px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
      line-height: 17px;
    }
  }

  &-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 47px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1890ff;
    cursor: pointer;
  }

  &-bottom:hover {
    background: rgba(0, 0, 0, 0.06);
  }

  &-shenhe {
    width: 30px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 20px;
    background-image: url("../assets/shenhe.png");
    background-size: 100% 100%;
    cursor: pointer;
  }

  &-daishenhe {
    width: 30px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 20px;
    background-image: url("../assets/daishenhe.png");
    background-size: 100% 100%;
    cursor: pointer;
  }

  &-backOut {
    width: 30px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 20px;
    background-image: url("../assets/backOut.png");
    background-size: 100% 100%;
    cursor: pointer;
  }

  &-reject {
    width: 30px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 20px;
    background-image: url("../assets/reject.png");
    background-size: 100% 100%;
    cursor: pointer;
  }

  &-bottom2 {
    height: 47px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;

    div {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(24, 144, 255, 1);
    }

    div:hover {
      background: rgba(0, 0, 0, 0.06);
    }
  }
}

.bookItem:hover {
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.12),
    0px 1px 2px -2px rgba(0, 0, 0, 0.16);
}

.tipBox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/deep/ .ivu-poptip-rel {
  width: 100% !important;
  height: 100% !important;
}

.buyBox {
  width: 60px;
  height: 60px;
  box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.09),
    0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px -1px rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  margin-right: 9px;
  background: linear-gradient(151deg, #64b8ff 0%, #074fd0 100%);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;

  div {
    width: 100%;

    div {
      width: 100%;
      text-align: center;
      font-weight: 500;
      color: #ffffff;
    }
  }
}

.checkBox {
  height: 60px;
  background: #ffffff;
  border-radius: 4px;
  margin-right: 9px;
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 20px;
  box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.09),
    0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px -1px rgba(0, 0, 0, 0.16);
  border-radius: 4px;
}

.selectItem {
  border: 1px solid #4f95ff;
  color: #4f95ff !important;
}

.ivu-tag-green {
  background: #f6ffed !important;
  border-color: 1px solid #b7eb8f !important;
}
</style>
